<template>
  <nav class="nav-bar">
    <div class="nav-left">
      <div class="logo-container">
        <div class="logo-icon">
          <img src="/favicon_mask.ico" alt="京剧脸谱" class="mask-icon">
        </div>
        <h1 class="logo">京剧苑</h1>
      </div>
      <div class="menu-toggle" @click="toggleMobileMenu">
        <i class="el-icon-menu"></i>
      </div>
    </div>
    <div class="nav-center" :class="{ 'mobile-active': mobileMenuVisible }">
      <router-link to="/" class="nav-item" :class="{ active: $route.path === '/' || $route.path === '/home' }" @click="closeMobileMenu">首页</router-link>
      <router-link to="/shows" class="nav-item" :class="{ active: $route.path === '/shows' }" @click="closeMobileMenu">演出</router-link>
      <router-link to="/artists" class="nav-item" :class="{ active: $route.path === '/artists' }" @click="closeMobileMenu">艺术家</router-link>
      <router-link to="/categories" class="nav-item" :class="{ active: $route.path === '/categories' }" @click="closeMobileMenu">行当</router-link>
      <router-link to="/schools" class="nav-item" :class="{ active: $route.path === '/schools' }" @click="closeMobileMenu">流派</router-link>
      <router-link to="/classics" class="nav-item" :class="{ active: $route.path === '/classics' }" @click="closeMobileMenu">经典剧目</router-link>
      <router-link to="/knowledge" class="nav-item" :class="{ active: $route.path === '/knowledge' || $route.path.startsWith('/knowledge/') }" @click="closeMobileMenu">知识</router-link>
      <router-link to="/forum" class="nav-item" :class="{ active: $route.path === '/forum' || $route.path.startsWith('/forum/') }" @click="closeMobileMenu">论坛</router-link>
    </div>
    <div class="nav-right" :class="{ 'mobile-active': mobileMenuVisible }">
      <!-- <div v-if="isLoggedIn" class="user-info">
        <img :src="avatar" alt="用户头像" class="user-avatar" />
        <span class="screenName">{{ screenName }}</span>
      </div> -->
     
      <router-link v-if="!isLoggedIn" to="/login" class="nav-btn" :class="{ active: $route.path === '/login' }" exact @click="closeMobileMenu">登录</router-link>
      <router-link v-if="!isLoggedIn" to="/register" class="nav-btn register" :class="{ active: $route.path === '/register' }" @click="closeMobileMenu">注册</router-link>
      <div v-if="isLoggedIn" class="user-box" @mouseenter="showDropdown" @mouseleave="hideDropdown">
        <span class="screenName" :style="{ color: screenNameColor }">{{ screenName }}</span>
        <img :src="userAvatarSrc" alt="用户头像" class="user-avatar" @click="openModal" />
        <div v-if="dropdownVisible" class="dropdown-menu">
          <div class="dropdown-content">
            <div class="dropdown-items">
              <router-link to="/profile" class="dropdown-item" @click="closeMobileMenu">
                <i class="el-icon-user"></i> <span>个人信息</span>
              </router-link>
              <router-link to="/bookmark" class="dropdown-item" @click="closeMobileMenu">
                <i class="el-icon-star-on"></i> <span>我的收藏</span>
              </router-link>
              <router-link to="/my-posts" class="dropdown-item" @click="closeMobileMenu">
                <i class="el-icon-document"></i> <span>我的帖子</span>
              </router-link>
              <router-link v-if="isAdmin || isArtist" to="/admin" class="dropdown-item" @click="closeMobileMenu">
                <i class="el-icon-setting"></i> <span>管理系统</span>
              </router-link>
              <div class="dropdown-divider"></div>
              <button @click="logout" class="dropdown-item logout">
                <i class="el-icon-switch-button"></i> <span>退出</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div v-if="isModalOpen" class="modal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <span class="close" @click="closeModal">&times;</span>
        <img :src="userAvatarSrc" alt="用户头像" class="modal-avatar" />
        <div class="avatar-actions">
          <button class="change-avatar-btn" @click="changeAvatar">更换头像</button>
          <!-- <button class="view-profile-btn" @click="viewProfile">查看个人信息</button> -->
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import service from '@/utils/request'
export default {
  name: 'NavBar',
  data() {
    return {
      isLoggedIn: false,
      screenName: '',
      avatar: '',
      defaultAvatar: '/images/default-avatar.png',
      dropdownVisible: false,
      dropdownTimeout: null,
      screenNameColor: '#FFD700',
      isAdmin: false,
      isArtist: false,
      isModalOpen: false,
      mobileMenuVisible: false
    };
  },
  computed: {
    userAvatarSrc() {
      return this.avatar || this.defaultAvatar;
    }
  },
  mounted() {
    this.checkUserLogin();
    window.addEventListener('resize', this.handleResize);
    this.handleResize();
    // 添加点击外部关闭下拉菜单
    document.addEventListener('click', this.handleOutsideClick);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    document.removeEventListener('click', this.handleOutsideClick);
  },
  methods: {
    checkUserLogin() {
      const token = localStorage.getItem('token');
      if (token) {
        this.isLoggedIn = true;
        this.screenName = localStorage.getItem('screenName'); 
        this.avatar = localStorage.getItem('avatar'); 
        const roleType = localStorage.getItem('roletype');
        this.isAdmin = roleType === '1';
        this.isArtist = roleType === '3';
      }
    },
    toggleDropdown() {
      this.dropdownVisible = !this.dropdownVisible;
    },
    handleOutsideClick(event) {
      const userBox = this.$el.querySelector('.user-box');
      if (userBox && !userBox.contains(event.target) && this.dropdownVisible) {
        this.dropdownVisible = false;
      }
    },
    toggleMobileMenu() {
      this.mobileMenuVisible = !this.mobileMenuVisible;
      document.body.style.overflow = this.mobileMenuVisible ? 'hidden' : '';
    },
    closeMobileMenu() {
      this.mobileMenuVisible = false;
      document.body.style.overflow = '';
    },
    handleResize() {
      if (window.innerWidth > 992 && this.mobileMenuVisible) {
        this.mobileMenuVisible = false;
        document.body.style.overflow = '';
      }
    },
    logout() {
      this.isLoggedIn = false;
      localStorage.removeItem('token');
      localStorage.removeItem('screenName');
      localStorage.removeItem('avatar');
      localStorage.removeItem('roletype');
      this.screenName = '';
      this.avatar = '';
      this.dropdownVisible = false;
      this.closeMobileMenu();
      this.$message.success('退出成功!');
      this.$router.push('/login');
    },
    openModal() {
      this.isModalOpen = true;
      this.dropdownVisible = false;
    },
    closeModal() {
      this.isModalOpen = false;
    },
    changeAvatar() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = 'image/*';
      
      // 添加文件大小和类型验证
      fileInput.onchange = (e) => {
        const file = e.target.files[0];
        if (!file) return;
        
        // 验证文件大小 (限制为2MB)
        if (file.size > 2 * 1024 * 1024) {
          this.$message.error('图片大小不能超过2MB');
          return;
        }
        
        // 验证文件类型
        const validTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
        if (!validTypes.includes(file.type)) {
          this.$message.error('只支持JPG、PNG、GIF和WEBP格式的图片');
          return;
        }
        
        const formData = new FormData();
        formData.append('avatar', file);
        formData.append('token', localStorage.getItem('token'));
        
        // 显示上传进度
        this.$message.info('头像上传中...');
        
        service.put('/api/system/user/updateAvatar', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.code === 200) {
            this.avatar = res.data;
            localStorage.setItem('avatar', this.avatar);
            this.$message.success('更换头像成功');
          }
        }).catch(err => {
          this.$message.error('更换头像失败: ' + (err.message || '服务器错误'));
        });
      };
      
      fileInput.click();
    },
    showDropdown() {
      clearTimeout(this.dropdownTimeout);
      this.dropdownVisible = true;
    },
    hideDropdown() {
      this.dropdownTimeout = setTimeout(() => {
        this.dropdownVisible = false;
      }, 300); // 300ms延迟，避免意外关闭
    }
  }
}
</script>

<style scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 5%;
  background: linear-gradient(135deg, #8B0000 0%, #4A0404 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  position: fixed;
  width: 90%;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.logo-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mask-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

.logo-container:hover .logo-icon {
  transform: scale(1.1);
}

.nav-left .logo {
  font-family: 'STXingkai', 'STZhongsong', serif;
  color: #FFD700;
  font-size: 2rem;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.menu-toggle {
  display: none;
  color: #FFD700;
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: 1rem;
  transition: transform 0.3s ease;
}

.menu-toggle:hover {
  transform: scale(1.1);
}

.nav-center {
  display: flex;
  gap: 2rem;
  transition: all 0.3s ease;
}

.nav-item {
  color: #FFD700;
  text-decoration: none;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item:hover, .nav-item.active {
  background: rgba(255, 215, 0, 0.1);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background-color: #FFD700;
  border-radius: 3px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.user-box {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 20px;
  transition: all 0.3s ease;
  margin-left: auto;
}

.user-box:hover {
  background: rgba(255, 215, 0, 0.1);
}

.screenName {
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFD700;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.dropdown-menu {
  position: absolute;
  top: 110%;
  right: 0;
  z-index: 1001;
  min-width: 220px;
  animation: dropdownFadeIn 0.25s ease;
  transform-origin: top right;
}

.dropdown-content {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

@keyframes dropdownFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-8px) scale(0.98); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
  }
}

.dropdown-items {
  padding: 5px 0;
}

.dropdown-divider {
  height: 1px;
  background-color: #eee;
  margin: 5px 0;
}

.dropdown-item {
  padding: 10px 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  color: #333;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  border-radius: 0;
  margin-bottom: 0;
}

.dropdown-item i {
  margin-right: 10px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  color: #8B0000;
  transition: all 0.2s ease;
}

.dropdown-item span {
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background: #f6f6f6;
  color: #8B0000;
}

.dropdown-item:hover i {
  transform: scale(1.1);
}

.dropdown-item.logout {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  color: #D32F2F;
  padding: 10px 15px;
}

.dropdown-item.logout:hover {
  background-color: #ffebee;
}

.dropdown-item.logout i {
  color: #D32F2F;
}

.nav-btn {
  padding: 0.75rem 2rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  font-weight: 500;
}

.nav-btn:not(.register) {
  color: #FFD700;
  border: 2px solid #FFD700;
}

.nav-btn:not(.register):hover {
  background: rgba(255, 215, 0, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-btn.register {
  background: #FFD700;
  color: #8B0000;
  font-weight: bold;
}

.nav-btn.register:hover {
  background: #ffc107;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 模态框样式 */
.modal {
  display: flex;
  position: fixed;
  z-index: 1002;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background-color: #fefbd8;
  margin: auto;
  padding: 30px;
  border: 2px solid #FFD700;
  border-radius: 15px;
  width: 80%;
  max-width: 500px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-avatar {
  width: 80%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  margin-bottom: 20px;
  border: 3px solid #FFD700;
}

.avatar-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.close {
  color: #8B0000;
  float: right;
  font-size: 32px;
  margin-top: -20px;
  margin-right: -20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close:hover {
  transform: scale(1.2) rotate(90deg);
  color: #FFD700;
}

.change-avatar-btn, .view-profile-btn {
  margin-top: 15px;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
  font-weight: bold;
}

.change-avatar-btn {
  background-color: #FFD700;
  color: #8B0000;
}

.view-profile-btn {
  background-color: #8B0000;
  color: #FFD700;
}

.change-avatar-btn:hover, .view-profile-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.change-avatar-btn:hover {
  background-color: #ffc107;
}

.view-profile-btn:hover {
  background-color: #a00000;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .menu-toggle {
    display: block;
  }
  
  .nav-center {
    position: fixed;
    top: 70px; /* 减小顶部间距 */
    left: 0;
    right: 0;
    background: rgba(80, 0, 0, 0.95);
    backdrop-filter: blur(5px); /* 添加背景模糊效果 */
    -webkit-backdrop-filter: blur(5px);
    flex-direction: column;
    padding: 0.8rem;
    gap: 0.5rem;
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 改善过渡动画 */
  }
  
  .nav-center.mobile-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  }
  
  .nav-item {
    width: 100%;
    text-align: center;
    padding: 0.8rem;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  }
  
  .nav-item:last-child {
    border-bottom: none;
  }
  
  .nav-item:hover {
    background: rgba(255, 215, 0, 0.15);
  }
  
  .nav-right {
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .nav-bar {
    padding: 0.8rem 3%;
    width: 94%;
  }
  
  .logo {
    font-size: 1.5rem;
  }
  
  .nav-right {
    position: fixed;
    top: calc(70px + 5 * 2.6rem); /* 导航栏高度 + 菜单项数量 * 菜单项高度 */
    left: 0;
    right: 0;
    background: rgba(80, 0, 0, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    flex-direction: column;
    padding: 0.8rem;
    gap: 0.8rem;
    transform: translateY(-150%);
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .nav-right.mobile-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .nav-btn {
    width: 80%;
    text-align: center;
    margin: 0.2rem 0;
  }
  
  .user-box {
    flex-direction: column;
    align-items: center;
  }
  
  .screenName {
    margin-bottom: 0.5rem;
  }
  
  .dropdown-menu {
    position: relative;
    top: 0;
    margin-top: 1rem;
    width: 90%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .nav-bar {
    padding: 0.6rem 2%;
    width: 96%;
  }
  
  .logo-icon {
    width: 24px;
    height: 24px;
  }
  
  .logo {
    font-size: 1.2rem;
  }
  
  .modal-content {
    width: 90%;
    padding: 15px;
  }
  
  /* 提升触摸区域大小 */
  .nav-item, .nav-btn, .dropdown-item {
    padding: 0.8rem;
    min-height: 44px; /* 触摸优化 */
  }
  
  .nav-right .user-avatar {
    width: 36px;
    height: 36px;
  }
}

/* 添加骨架屏效果 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.avatar-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 50%;
}

/* 添加暗黑模式支持 */
@media (prefers-color-scheme: dark) {
  .dropdown-content {
    background: #2c2c2c;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  }
  
  .dropdown-divider {
    background-color: #444;
  }
  
  .dropdown-item {
    color: #eaeaea;
  }
  
  .dropdown-item i {
    color: #FFD700;
  }
  
  .dropdown-item:hover {
    background: #3c3c3c;
    color: #FFD700;
  }
  
  .dropdown-item.logout {
    color: #ff6b6b;
  }
  
  .dropdown-item.logout:hover {
    background-color: rgba(255, 0, 0, 0.1);
  }
  
  .dropdown-item.logout i {
    color: #ff6b6b;
  }
  
  .modal-content {
    background-color: #2d2d2d;
    color: #FFD700;
  }
}

/* 添加无障碍支持 */
.nav-item:focus, .nav-btn:focus, .dropdown-item:focus, .user-avatar:focus {
  outline: 2px solid #FFD700;
  outline-offset: 2px;
}
</style> 